<template>
  <table class="table tablesorter" :class="tableClass">
    <thead :class="theadClasses">
    <tr>
      <!-- <slot name="columns">
        <th v-for="column in columns" :key="column">{{column}}</th>
      </slot> -->
      <td colspan="3" style="color: #f96216;  font-size: 17px;">豆二 合约 b2310</td>
    </tr>
    </thead>
    <tbody :class="tbodyClasses">
    <tr v-for="(item, index) in data" :key="index" :class="index==5?'tdsets':''">
      <slot :row="item">
        <td v-for="(column, index) in columns"
            :key="index"
            :class="hasClass(item, column)"
            v-if="hasValue(item, column)">
          <span v-html='itemValue(item, column)'></span>
          <font-awesome-icon v-if="column === 'salary' && item['fontColor'] === 'red'" icon="fa-solid fa-turn-up" />
          <font-awesome-icon v-if="column === 'salary' && item['fontColor'] === 'green'" icon="fa-solid fa-turn-down" />
        </td>
      </slot>
    </tr>
    </tbody>
  </table>
</template>
<script>
  export default {
    name: 'base-table',
    props: {
      columns: {
        type: Array,
        default: () => [],
        description: "Table columns"
      },
      data: {
        type: Array,
        default: () => [],
        description: "Table data"
      },
      type: {
        type: String, // striped | hover
        default: "",
        description: "Whether table is striped or hover type"
      },
      theadClasses: {
        type: String,
        default: '',
        description: "<thead> css classes"
      },
      tbodyClasses: {
        type: String,
        default: '',
        description: "<tbody> css classes"
      }
    },
    data: function () {
			return {
        tdsets : 'tdsets'
      }
    },
    computed: {
      tableClass() {
        return this.type && `table-${this.type}`;
      }
    },
    methods: {
      hasValue(item, column) {
        return item[column.toLowerCase()] !== "undefined";
      },
      itemValue(item, column) {
        return item[column.toLowerCase()]
      },
      hasClass(item, column) {
        if (column === 'salary') {
          if (item['fontColor'] === 'green') {
            return 'fontGreen'
          } else {
            return 'fontRed'
          }
        }
      }
    }
  };
</script>
<style scoped>
.table {
  width: 100%;
  margin-bottom: 1rem;
  background-color: transparent; 
}
.table th,
.table td {
  padding: 0.1rem;
  vertical-align: top;
  text-align: center;
}

.table  thead th {
  vertical-align: bottom;
  border-bottom: (2 * 1px) solid #dee2e6;
}

tbody + tbody {
  border-top: (2 * 1px) solid #dee2e6;
}

.table {
  background-color: #fff;
}
.tdsets  td {
  border-top: 0.0625rem solid #dfdbdb;
}
.fontGreen {
  color: green;
}
.fontRed {
  color: red;
}
</style>
